<script setup>
import { useRouter, useRoute } from "vue-router"
import { getselectAllByPrice } from "@/server/api/shopApi";
import { ref, onMounted } from "vue";
import { showDialog } from "vant";
import { useUseStore } from "@/stores/user";
import { changeRoomStatus } from "@/server/api/shopApi";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const list = ref({});
//房间数组
const roomList = ref([]);
const loading = ref(false)
const finished = ref(true)
const onLoad = async () => {

}
list.value = JSON.parse(route.query.data);
const shopInfo = ref({
    shopId: null,
    priceSearch: false,
    ascending: false,
    descending: false,
    status: "-1"
})
shopInfo.value.shopId = list.value.shopId;
//获取房间
const getHotelRoom = async () => {
    const res = await getselectAllByPrice(shopInfo.value);
    if (res.data.data.length == 0) {
        showDialog({
            title: "提示",
            message: "还没有任何房间"
        }).then(() => {
            router.go(-1);
        })
    } else {
        roomList.value = res.data.data;
    }
};
//路由跳转
const toedit = (i) => {
    router.push({
        path: "/hotelMerchandise",
        query: { data: i.roomId, status: 1 },
    });
}
//下架房间
const upToDown = async (roomId, status) => {
    if (status == 0) {
        const room = ({
            roomId: roomId,
            status: 1
        });
        await changeRoomStatus(room);
        router.go(0);
    } else {
        const room = ({
            roomId: roomId,
            status: 0
        });
        await changeRoomStatus(room);
        router.go(0);
    }
}
onMounted(() => {
    getHotelRoom();
})
</script>

<template>
    <TopButtonCenter title="房间管理" />
    <div class="mask"></div>
    <div class="ManageHotelRoom">
        <header>
            <div class="left">
                <div class="login" @click="goShopDetail()">
                    <!-- <img v-lazy="list.userImage" alt="" /> -->
                    <img :src="list.userImage || `/images/pipayshop_logo.png`" alt="" />
                </div>
                <div class="right_tex">
                    <h5>{{ list.shopName }}</h5>
                    <div class="totol">
                        <span @click="goShopFans()">{{ list.follows }} Fans</span>
                        {{ list.score }}
                        <van-rate v-model="list.score" :size="15" :count="5" color="#ffd21e" void-icon="star"
                            void-color="#eee" readonly />
                    </div>
                </div>
            </div>
            <div class="right">
                <!-- 编辑图片按钮 -->
                <img class="editImg" src="/images/edit.png" @click="
                    $router.push({
                        path: '/updateShopInfo',
                        query: { id: list.shopId },
                    })
                    " />
                <!-- 删除店铺按钮 -->
                <img class="rubbishImg" src="/images/rubbish.png" @click="deleteShop(list.shopId)" />
            </div>
        </header>

        <ul class="list">
            <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('shop.shopList.finish')"
                @load="onLoad">
                <li class="box_show" v-for="(i, index) in roomList" :key="index">
                    <div class="login">
                        <img v-lazy="i.imageList[0]" alt="" />
                    </div>

                    <div class="text_ad">
                        <p>{{ i.roomTypeName }}</p>
                        <div class="btn_res" v-if="false">
                            <van-popover v-model:show="actions.showPopover" :tabindex="index" :actions="actions"
                                @select="onSelect">
                                <template #reference>
                                    <div class="button">{{ text }}</div>
                                </template>
                            </van-popover>
                        </div>

                        <div class="btnList">
                            <!-- 修改商品按钮 -->
                            <div class="button" @click="toedit(i)">
                                {{ $t("mShopLChild.update") }}
                            </div>
                            <div class="button" v-if="i.status == 0" @click="upToDown(i.roomId, i.status)">
                                {{ $t("me.manage.down") }}
                            </div>
                            <div class="button" v-else-if="i.status == 1" @click="upToDown(i.roomId, i.status)">
                                {{ $t("me.manage.up") }}
                            </div>
                            <div class="button" v-else-if="i.status == 2">审核中</div>
                        </div>
                    </div>
                </li>
            </van-list>
        </ul>
    </div>

</template>

<style scoped lang="scss">
.mask {
    height: 60rem;
}

.ManageHotelRoom {
    font-size: 14rem;
    padding: 0 10rem;

    header {
        margin-bottom: 30rem;
        display: flex;
        padding: 10rem 0;
        border-bottom: 1rem solid #d2d2d2;

        .left {
            display: flex;

            .right_tex {
                position: relative;
                line-height: 30rem;
                margin: 0 10rem;

                >h5 {
                    font-size: 16rem;
                    font-weight: 500;
                }

                .totol {
                    color: #d2d2d2;
                }
            }

            .login {
                width: 70rem;
                height: 70rem;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
        }

        .right {
            margin-left: 40rem;

            //编辑图片
            .editImg {
                width: 35px;
                height: 35px;
                margin-right: 23rem;
            }

            //垃圾桶图片
            .rubbishImg {
                width: 35px;
                height: 35px;
            }
        }

        //编辑图片
    }

}

.list {
    li {
        box-sizing: border-box;

        margin-bottom: 10rem;
        padding: 10rem 0;

        display: flex;
        justify-content: space-between;

        border-radius: 12rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0rem 5rem 15rem rgba(206, 199, 212, 0.1);

        .login {
            overflow: hidden;
            width: 70rem;
            height: 70rem;

            border-radius: 12rem;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .text_ad {
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: column;
            margin: 0 10rem;

            .btn_res {
                position: absolute;
                top: 25rem;
                right: -8rem;

                :deep(.van-popover__wrapper) {
                    .button {
                        text-align: center;
                        width: 105rem;
                        border-radius: 10rem;
                        height: 32rem;
                        line-height: 32rem;
                        color: #642e8e;
                        background-color: #d1c0dd;
                    }
                }
            }

            p {
                font-size: 16rem;
                width: max-content;

                /** 文本1 */
                font-size: 16rem;
                font-weight: 400;
                letter-spacing: 0rem;
                line-height: 24rem;
                color: rgba(51, 51, 51, 1);
                text-align: left;
                vertical-align: top;
            }

            .btnList {
                margin-top: 22rem;
                display: flex;

                .button {
                    box-sizing: border-box;
                    width: 115rem;
                    height: 32rem;
                    opacity: 1;
                    border-radius: 220rem;
                    margin-right: 10rem;
                    line-height: 32rem;
                    text-align: center;
                    color: #642e8e;
                    border-radius: 20rem;
                    border: 2rem solid;
                    font-weight: 600;
                }
            }
        }
    }
}
</style>
